<template>
	<div>
		<NewSearchDetail v-model="visible" :title="title" :type="true">
			<div class="search-left">
				<div class="top flex j-between">
					<div class="left border-spot m-r-10">
						<div class="left-box">
							<img :src="detail.picture ? detail.picture : gardenImg">
						</div>
					</div>
					<div class="right">
						<div class="tree-msg">
							<div class="tree-msg-nav">树种信息</div>
							<div class="tree-msg-list">
								<!-- <div class="border-spot m-r-20 min-w-200">
									<Echarts width="200px" height="209px" key="szxx" ref="szEcharts"
										:options="szOptions"></Echarts>
								</div> -->
								<div class="tree-seeds noScroll">
									<div class="tree-seeds-item" v-for="(item,index) in parkDetail.treespecList"
										:key="index">
										<div class="item-name">
											<!-- <img v-if="item.iconid" :src="getIconUrl(item)"> -->
											<img src="../../../../assets/new/tree_gh_left.png">
											{{item.maintree}}
										</div>
										<div class="item-img">
											<div class="item-img-cont">
												<img src="../../../../assets/new/tree_gh_right.png" >
												{{item.maintree}}
											</div>
											<div class="item-cont">
												<div>
													<label>数量:</label>
													<span><span>{{item.treenum}}</span>棵</span>
												</div>
												<div>
													<label>规格(胸径):</label>
													<span><span>{{item.specsName}}</span>CM</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="tree-echarts">
							<div class="tree-echarts-nav tree-title">实时状态</div>
							<div class="status border-spot flex j-between">
								<ul class="left-bottom-ul">
									<li>
										<div class="left-bottom-ul-li-msg flex a-center">
											<p>生长势(强)：</p>
											<span>
												<span>{{detail.others && detail.others[0].strongGrowingTree && detail.others[0].strongGrowingTree *  detail.others[0].totalCount > 0 ? detail.others[0].strongGrowingTree : 0}}</span>/{{detail.others && detail.others[0].totalCount && detail.others[0].strongGrowingTree *  detail.others[0].totalCount > 0 ? detail.others[0].totalCount : 0}}
											</span>
										</div>
										<div class="left-bottom-ul-li-cont">
											<i-circle :percent="parkDetail.szsNum" :size="40" :stroke-width="14"
												stroke-linecap="square" stroke-color="#1EB0FC" :trail-width="3"
												trail-color="#1EB0FC"></i-circle>
										</div>
									</li>
									<li>
										<div class="left-bottom-ul-li-msg flex a-center">
											<p>健康(无病害)：</p>
											<span>
												<span>{{detail.others && detail.others[0].strongGrowingTree && detail.others[0].strongGrowingTree * detail.others[0].totalCount > 0 ? detail.others[0].healthyTrees : 0}}</span>/{{detail.others && detail.others[0].totalCount && detail.others[0].strongGrowingTree * detail.others[0].totalCount > 0 ? detail.others[0].totalCount : 0}}
											</span>
										</div>
										<div class="left-bottom-ul-li-cont">
											<i-circle :percent="parkDetail.jkNum" :size="40" :stroke-width="14"
												stroke-linecap="square" stroke-color="#1EB0FC" :trail-width="3"
												trail-color="#1EB0FC"></i-circle>
										</div>
									</li>
								</ul>
								<Echarts width="310px" height="250px" key="szqk" :options="ylOptions" class="echarts"
									ref="ylOptionsRef"></Echarts>
								<div class="left-bottom-unit">单位：棵</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom m-t-0 m-b-0 flex">
					<div class="m-r-10" style="margin-top: 4px;">
						<div class="left">
							<div class="bottom-left-nav">
								园林资料
							</div>
							<div class="bottom-left-ul">
								<ul class="bottom-left-ul-first">
									<li>
										<p>树木类型：</p>
										<span>{{detail.bigTypeName || '--'}}{{detail.smallTypeName || ''}}</span>
									</li>
									<li>
										<p>所属机构：</p>
										<span>{{detail.departName || '--'}}</span>
									</li>
									<li>
										<p>责任人：</p>
										<span>{{detail.principal || '--'}}</span>
									</li>
									<li>
										<p>维护单位：</p>
										<span>{{detail.maintain || '--'}}</span>
									</li>
								</ul>
								<ul class="bottom-left-ul-last">
									<li>
										<p>设施状态：</p>
										<span>{{detail.status || '- -'}}</span>
									</li>
									<li>
										<p>园林地址：</p>
										<span>{{detail.site || '--'}}</span>
									</li>
								</ul>
								<div class="bottom-left-title">
									{{detail.others ? detail.others[0].introduction : ''}}
								</div>
							</div>
						</div>
						<div class="left-btn">
							<div @click.stop="onClickSkill">技术资料</div>
							<div :style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
								@click.stop="onClickVideo">
								<Icon custom="i-icon icon-jiankong11" size="22" />
								摄像头
							</div>
						</div>
					</div>
					
					<div class="right">
						<div class="right-title tree-title">
							绿化信息
						</div>
						<div class="right-content">
							<div class="right-green">
								<i-circle :percent="parkDetail.lhlNum" :size="72" :stroke-width="8" :trail-width="8"
									:stroke-color="['#68CBFF','#1EB0FC']" :trail-color="'rgba(0,0,0,0)'">
									<span class="right-green-box-circle-count">{{parkDetail.lhlNum}}%</span>
								</i-circle>
								<div class="right-green-text m-l-20">
									<p>绿化率</p>
									<span>现有绿化面积占比</span>
								</div>
								<div class="right-green-count m-l-40">
									<span>{{detail.others ? detail.others[0].greenArea : '0'}}</span> km²
								</div>
							</div>
							<div class="right-area">
								<div class="right-area-item">
									<span>区域总面积：</span>
									<span>{{detail.others ? detail.others[0].totalArea : '0'}}</span>km²
								</div>
								<div class="right-area-item">
									<span>规划绿地面积：</span>
									<span>{{detail.others ? detail.others[0].plannedGreenArea : '0'}}</span>km²
								</div>
							</div>
							<div class="right-person">
								<div class="right-person-item">
									<img src="../../../../assets/new/detail_green1.png">
									<div class="right-person-item-text">
										养护工人
									</div>
									<div class="right-person-item-num">
										{{detail.others ? detail.others[0].maintenanceWorkers : '0'}}
									</div>
								</div>
								<div class="right-person-item">
									<img src="../../../../assets/new/detail_green2.png">
									<div class="right-person-item-text">
										保洁人员
									</div>
									<div class="right-person-item-num">
										{{detail.others ? detail.others[0].housekeeper : '0'}}
									</div>
								</div>
								<div class="right-person-item">
									<img src="../../../../assets/new/detail_green3.png">
									<div class="right-person-item-text">
										养护车辆
									</div>
									<div class="right-person-item-num">
										{{detail.others ? detail.others[0].maintainCar : '0'}}
									</div>
								</div>
								<div class="right-person-item">
									<img src="../../../../assets/new/detail_green4.png">
									<div class="right-person-item-text">
										物料设备
									</div>
									<div class="right-person-item-num">
										{{detail.others ? detail.others[0].material : '0'}}
									</div>
								</div>
							</div>
							<div class="right-list">养护记录</div>
							<div class="right-num">
								<p style="color:#999999">养护周期：</p>
								<span>{{detail.others ? detail.others[0].maintenanceCycleGardens + '一次' : '- -'}}</span>
							</div>
							<ul class="work-list" v-if="workRecordArr.length>0">
								<li class="work-list-item" v-for="(item,index) in workRecordArr" :key="index">
									<div class="time">{{item.createTime}}</div>
									<div class="name">{{item.createName}}</div>
									<div class="cont">
										{{item.title + ' | '}}{{item.des}}
									</div>
									<div class="multimedia">
										<div class="item video-item" v-previewVideo="item.videourl" v-if="item.videourl">
											<Icon custom="i-icon icon-bofang" size="25" color='#fff'></Icon>
										</div>
										<div class="item" v-for="(items,indexs) in item.imgurls" :key="indexs">
											<el-image :src="items" fit="cover" :preview-src-list="[items]"
												class="detail-top-img" v-if="item.imgurls.length != 0">
											</el-image>
										</div>
									</div>
								</li>
								<infinite-loading @infinite="getGardenMaintainPageList" :distance="10"
									ref="infiniteLoading">
									<span slot="no-results" style="font-size: 16px;">
										暂无更多养护记录
									</span>
									<span slot="no-more" style="font-size: 16px;">
										暂无更多养护记录
									</span>
								</infinite-loading>
							</ul>
							<ul class="work-list" v-else>
								<div class="work-list-not">
									<img src="../../../../assets/new/detail_no.png" >
									暂无数据
								</div>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</NewSearchDetail>

		<Modal v-model="skillVisible" footer-hide width="1044">
			<div class="skill noScroll">
				<div class="skill-nav">
					技术资料
				</div>
				<div class="skill-title">
					{{technical.name}}
				</div>
				<div class="skill-tip">
					{{technical.maintain}} | {{technical.sphereApplication}}
				</div>
				<img src="../../../../assets/new/detail_pop.png" class="skill-img" />
				<div class="skill-cont">
					<div v-html="technical.cont"></div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue";
	import MyTreeSelect from '@/components/common/MyTreeSelect';
	import Echarts from '../../../common/Echarts';
	import {
		formatDate
	} from '@/utils/dateRangUtil';
	import InfiniteLoading from 'vue-infinite-loading';
	export default {
		components: {
			NewSearchDetail,
			MyTreeSelect,
			Echarts,
			InfiniteLoading
		},
		data() {
			return {
				colorList: [
					'#66FF00',
					'#66FF99',
					'#33FF00',
					'#33FF99',
					'#00FF00',
					'#00FF33',
					'#00FF88',
					'#66FF66',
					'#FFFF99',
					'#CCFF99',
					'#99FF99',
					'#00FF55',
					'#11FF99',
					'#00FF66',
					'#CCFF66',
					'#99FF66',
					'#66FF33',
					'#33FF33',
				],
				visible: false,
				dataId: '',
				title: '',
				detail: {},
				gardenImg: require('../../../../assets/demo/garden.png'),
				identifyingArr: [{
						id: 'baiyang',
						name: require('../../../../assets/common/gardens/baiyang.png')
					},
					{
						id: 'guohuai',
						name: require('../../../../assets/common/gardens/guohuai.png')
					},
					{
						id: 'hehuan',
						name: require('../../../../assets/common/gardens/hehuan.png')
					},
					{
						id: 'lishu',
						name: require('../../../../assets/common/gardens/lishu.png')
					},
					{
						id: 'luanshu',
						name: require('../../../../assets/common/gardens/luanshu.png')
					},
					{
						id: 'nvzhen',
						name: require('../../../../assets/common/gardens/nvzhen.png')
					},
					{
						id: 'other',
						name: require('../../../../assets/common/gardens/other.png')
					},
					{
						id: 'wujiaofeng',
						name: require('../../../../assets/common/gardens/wujiaofeng.png')
					},
					{
						id: 'wutong',
						name: require('../../../../assets/common/gardens/wutong.png')
					},
					{
						id: 'yinghua',
						name: require('../../../../assets/common/gardens/yinghua.png')
					},
					{
						id: 'yinxing',
						name: require('../../../../assets/common/gardens/yinxing.png')
					},
				],
				// 技术资料
				skillVisible: false,
				technical: {},
				// 问题整改
				issueVisible: false,
				// 问题整改 tabs
				issueTabsIndex: 0,
				assignTree: '',
				assignTreeData: [{
					title: '山东蜻蜓数字科技有限公司',
					value: 1,
					children: [{
						title: '奎文区',
						value: 11,
						children: [{
							title: '山东蜻蜓数字科技有限公司',
							value: 111,
							children: [{
								title: '保洁队',
								value: 1111
							}, {
								title: '公厕队',
								value: 1112
							}, {
								title: '运输队',
								value: 1113
							}, {
								title: '建筑队',
								value: 1114
							}, {
								title: '园林队',
								value: 1115
							}]
						}]
					}]
				}],
				issueTypeValue: 1,
				issueTypeList: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '堆弃杂物'
					},
					{
						id: 3,
						name: '垃圾污染'
					},
					{
						id: 4,
						name: '水域污染'
					},
					{
						id: 5,
						name: '排水堵塞'
					},
					{
						id: 6,
						name: '景观污染损坏'
					},
					{
						id: 7,
						name: '设施污染损坏'
					}
				],
				patrolColumns: [{
						title: '问题类型',
						key: 'type'
					},
					{
						title: '上报时间',
						key: 'time'
					},
					{
						title: '问题地点',
						key: 'site'
					},
					{
						title: '问题描述',
						key: 'desc'
					}
				],
				patrolData: [],
				ylOptions: {
					title: {
						text: '树龄分布',
						textStyle: {
							color: '#1EB0FC',
							fontSize: 14
						}
					},
					tooltip: {},
					radar: {
						indicator: [{
								name: '小于3年'
							},
							{
								name: '3~5年'
							},
							{
								name: '5~10年'
							},
							{
								name: '10~20年'
							},
							{
								name: '20年以上'
							},
						]
					},
					series: [{
						name: '生长情况',
						type: 'radar',
						data: []
					}]
				},
				greenOptions: {
					xAxis: {
						show: true,
						type: 'category',
						interval: 0,
						data: ['2016', '2017', '2018', '2019', '2020']
					},
					yAxis: {
						show: false,
						type: 'value',
						splitLine: {
							show: false
						}
					},
					series: [{
						type: 'line',
						symbol: 'none',
						smooth: true,
						data: [0, 60, 80, 60, 140],
					}],
					color: ['#8EB45E'],
					textStyle: {
						color: '#fff'
					}
				},
				// 树种echarts
				szOptions: {
					backgroundColor: 'transparent',
					tooltip: {},
					animationDurationUpdate: function(idx) {
						// 越往后的数据延迟越大
						return idx * 100;
					},
					animationEasingUpdate: 'bounceIn',
					color: ['#fff', '#fff', '#fff'],
					series: [{
						type: 'graph',
						layout: 'force',
						force: {
							repulsion: 100,
							edgeLength: 10,
						},
						roam: true,
						label: {
							normal: {
								show: true,
							},
						},
						data: [],
					}, ],
				},
				// 获取树种列表，生长势、健康、绿化率百分比
				parkDetail: {},
				// 日志记录
				workRecordArr: [
					// {
					// 	createTime:'2021-01-13',
					// 	createName:'赵小强',
					// 	title:'养护达到标准',
					// 	des:'修剪掉多余枯败的枝条，修剪掉顶部过长的枝桠，使养分得以均衡',
					// 	videourl:'',
					// 	imgurls:[
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png')
					// 	]
					// },{
					// 	createTime:'2021-01-13',
					// 	createName:'赵小强',
					// 	title:'养护达到标准',
					// 	des:'修剪掉多余枯败的枝条，修剪掉顶部过长的枝桠，使养分得以均衡',
					// 	videourl:'',
					// 	imgurls:[]
					// }
				],
				pageNum: 1,
				pageSize: 3,
				totalPage: 0
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getParkDetail()
					this.getGardenMaintainList()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.dataId = ''
					this.pageNum = 1
					this.totalPage = 0
					this.workRecordArr = []
					this.parkDetail = {}
					this.szOptions.series[0].data = []
				}
			}
		},
		computed: {},
		mounted() {
			this.init()
		},
		methods: {
			getIconUrl(items) {
				return this.identifyingArr.find(item => item.id === items.iconid).name
			},
			init() {
				bus.$on('showMainSearchGardenDetail', data => {
					this.dataId = data.id
					this.title = data.title
					this.visible = true
				})
			},
			getDetail() {
				this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
					this.detail = res
					if (this.detail.status == 0) {
						this.detail.status = '正常'
					} else if (this.detail.status == 1) {
						this.detail.status = '废弃'
					} else if (this.detail.status == 2) {
						this.detail.status = '维修'
					} else if (this.detail.status == 3) {
						this.detail.status = '拆除'
					} else if (this.detail.status == 4) {
						this.detail.status = '暂停'
					}
				})
			},
			// 获取树种列表，生长势、健康、绿化率百分比
			getParkDetail() {
				this.$http.getParkTreeDetail({
					id: this.dataId
				}).then((res) => {
					if (res.code === 200) {
						this.parkDetail = res.result
						let sizeArr = [110, 100, 90, 80, 70, 60, 50, 40, 30, 20]
						// 树种图表
						// this.szOptions.series[0].data = this.parkDetail.treespecList.map((item, index) => {
						// 	let data = {
						// 		name: item.maintree,
						// 		value: item.treenum,
						// 		// symbolSize: item.treenum,
						// 		draggable: true,
						// 		itemStyle: {
						// 			normal: {
						// 				color: this.colorList[this.randomNum(0, 17)],
						// 			},
						// 		},
						// 	}
						// 	// 图表球球的大小
						// 	if (this.parkDetail.treespecList.length == 1) {
						// 		data.symbolSize = sizeArr[6]
						// 	} else if (this.parkDetail.treespecList.length == 2) {
						// 		data.symbolSize = sizeArr[index + 5]
						// 	} else if (this.parkDetail.treespecList.length == 3) {
						// 		data.symbolSize = sizeArr[index + 4]
						// 	} else if (this.parkDetail.treespecList.length == 4) {
						// 		data.symbolSize = sizeArr[index + 3]
						// 	} else if (this.parkDetail.treespecList.length == 5) {
						// 		data.symbolSize = sizeArr[index + 2]
						// 	} else if (this.parkDetail.treespecList.length == 6) {
						// 		data.symbolSize = sizeArr[index + 1]
						// 	} else if (this.parkDetail.treespecList.length == 7) {
						// 		data.symbolSize = sizeArr[index]
						// 	} else if (this.parkDetail.treespecList.length == 8) {
						// 		data.symbolSize = sizeArr[index]
						// 	} else if (this.parkDetail.treespecList.length == 9) {
						// 		data.symbolSize = sizeArr[index]
						// 	} else if (this.parkDetail.treespecList.length == 10) {
						// 		data.symbolSize = sizeArr[index]
						// 	}
						// 	return data
						// })
						// this.$refs.szEcharts.init()
						// 树龄图表最大值
						let arr = [0, 0, 0, 0, 0]
						let max = 0
						this.parkDetail.bTables.forEach(item => {
							if (parseInt(item.time) < 3) {
								arr[0] = arr[0] + item.data
							} else if (item.time >= 3 && item.time < 5) {
								arr[1] = arr[1] + item.data
							} else if (item.time >= 5 && item.time < 10) {
								arr[2] = arr[2] + item.data
							} else if (item.time >= 10 && item.time < 20) {
								arr[3] = arr[3] + item.data
							} else {
								arr[4] = arr[4] + item.data
							}
						})
						arr.forEach(item => {
							if (item > max) {
								max = item
							}
						})
						this.ylOptions.radar.indicator.forEach(item => {
							item.max = max
						});
						// 树龄分布数据
						this.ylOptions.series[0].data = [{
							value: arr,
							name: '生长情况'
						}]
						this.$refs.ylOptionsRef.init()
					}
				})
			},
			// 随机数
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			},
			// 获取养护记录
			getGardenMaintainList() {
				let params = {
					treeId: this.dataId,
					page: this.pageNum,
					size: this.pageSize
				}
				this.$http.getMapTreeMaintainList(params).then(res => {
					if (res.code == 200) {
						this.workRecordArr = res.result.treeMaintains.map(item => {
							item.imgurls = item.imgurls.split(',').filter(items => items)
							return item
						})
						this.totalPage = res.result.pages
						this.pageNum++
					}
				})
			},
			// 获取养护记录分页列表
			getGardenMaintainPageList($state) {
				if (this.pageNum >= this.totalPage) {
					$state.complete()
					return
				}
				let params = {
					treeId: this.dataId,
					page: this.pageNum,
					size: this.pageSize
				}
				this.$http.getMapTreeMaintainList(params).then(res => {
					if (res.code == 200) {
						let arr = res.result.treeMaintains.map(item => {
							item.imgurls = item.imgurls.split(',').filter(items => items)
							return item
						})
						this.workRecordArr = this.workRecordArr.concat(arr)
						this.pageNum++
						$state.loaded()
					}
				})
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 1) return
				let params = {
					equipcode: this.detail.equipcode,
					eqptype: this.detail.eqptype,
					details: this.detail.channels,
				}
				bus.$emit('showPlayVideoModal', params)
			},
			// 技术资料
			onClickSkill() {
				this.skillVisible = true
				this.$store.dispatch('getConserveDetail', this.detail.others[0].technical).then(res => {
					this.technical = res
				})
			},
			// 问题整改
			onClickIssue() {
				this.issueVisible = true
			},
			// 问题整改 tabs
			onClickIssueTabs(i) {
				this.issueTabsIndex = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/modal";

	::v-deep {
		.ivu-modal-body {
			padding: 0;
		}
	}

	.search-left {
		font-size: 18px;
		color: #ffffff;
		font-weight: 500;
		line-height: 1;

		.top {
			.left {
				width: 604px;
				height: 666px;
				background: url(../../../../assets/new/detail_666.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;

				.left-img {
					width: 206px;
					height: 46px;
					font-size: 16px;
					color: #23CEFD;
					font-weight: bold;
					background: url(../../../../assets/new/detail_nav_206.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					padding: 3px 0 0 26px;
					margin: 14px 0 0 10px;

					img {
						width: 22px;
						height: 22px;
						margin-right: 10px;
					}
				}

				.left-box {
					flex: 1;
					display: flex;
					align-items: center;
					img {
						width: 550px;
						height: 560px;
						object-fit: cover;
						display: block;
						margin: 12px auto 0;
					}
				}
			}

			.right {
				.tree-msg {
					width: 595px;
					height: 319px;
					background: url(../../../../assets/new/detail_319.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					overflow: hidden;

					.tree-msg-nav {
						width: 366px;
						height: 46px;
						font-size: 16px;
						background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
						background-size: 100% 100%;
						margin: 17px 0 0 17px;
						padding-left: 26px;
						display: flex;
						align-items: center;
					}

					.tree-msg-detail {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
					
					.tree-msg-list::-webkit-scrollbar{
						width: 5px;
					}
					.tree-msg-list::-webkit-scrollbar-thumb{
						background-color: #CCCCCC;
					}
					.tree-msg-list {
						height: 220px;
						font-size: 16px;
						color: #FFFFFF;
						font-weight: 500;
						line-height: 1;
						padding: 0 28px;
						overflow: auto;

						.tree-seeds-item{
							height: 70px;
							display: flex;
							align-items: center;
							.item-name{
								flex: 1;
								display: flex;
								align-items: center;
								img{
									width: 70px;
									height: 70px;
								}
							}
							.item-img{
								flex: 2;
								margin-left: 30px;
								.item-img-cont{
									font-size: 16px;
									color: #FFFFFF;
									font-weight: 500;
									display: flex;
									align-items: center;
									margin-bottom: 5px;
										img{
											width: 24px;
											height: 24px;
											margin-right: 10px;
										}
								}
							}
							.item-cont{
								flex: 2;
								font-size: 14px;
								display: flex;
								align-items: center;
								div:first-child{
									flex: 1;
								}
								div:last-child{
									flex: 2;
								}
								label{
									color: #999999;
								}
							}
						}
					}

					.tree-msg-center {
						display: flex;
						align-items: center;
						padding: 0 35px;

						p {
							color: #999999;
						}
					}

					.tree-ul {
						display: flex;
						flex-wrap: wrap;
						padding: 0 35px;

						.tree-li {
							width: 33.3%;
							display: flex;
							align-items: center;
							margin-bottom: 20px;

							p {
								color: #999999;
							}
						}
					}

				}

				.tree-echarts {
					width: 595px;
					height: 343px;
					background: url(../../../../assets/new/detail_343.png) 0 0 no-repeat;
					background-size: 100% 100%;
					position: relative;

					.tree-echarts-nav {
						width: 206px;
						height: 46px;
						background: url(../../../../assets/new/detail_nav_206.png) 0 0 no-repeat;
						background-size: 100% 100%;
						position: absolute;
						left: 17px;
						top: 17px;
					}
					.left-bottom-unit{
						font-size: 14px;
						color: #FFFFFF;
						font-weight: 500;
						position: absolute;
						top: 30px;
						right: 30px;
					}
					.left-bottom-ul{
						height: 280px;
						font-size: 16px;
						color: #999999;
						padding-left: 52px;
						margin-top: 58px;
						display: flex;
						flex-direction: column;
						justify-content: center;
						li{
							.left-bottom-ul-li-cont{
								margin-top: 20px;
							}
							span{
								color: #FFFFFF;
								span{
									font-size: 20px;
									font-weight: bold;
								}
							}
						}
						li:last-child{
							margin-top: 18px;
						}
					}
				}

				.status {
					width: 595px;
					height: 343px;

					.echarts {
						position: absolute;
						left: 70%;
						top: 20%;
						transform: translate(-50%);
					}
				}
			}
		}

		.bottom {
			.left {
				width: 604px;
				height: 354px;
				font-weight: 500;
				background: url(../../../../assets/new/detail_418.png) 0 0 no-repeat;
				background-size: 100% 100%;
				overflow: hidden;

				.bottom-left-nav {
					width: 206px;
					height: 46px;
					font-size: 16px;
					color: #23CEFD;
					background: url(../../../../assets/new/detail_nav_206.png) 0 0 no-repeat;
					background-size: 100% 100%;
					margin: 11px 0 0 9px;
					display: flex;
					align-items: center;
					padding-left: 26px;
				}

				.bottom-left-ul {
					font-size: 14px;
					padding: 0 30px;
				}

				.bottom-left-ul-first {
					display: flex;
					flex-wrap: wrap;
					margin-top: 10px;

					li {
						width: 50%;
						line-height: 1.5;
						display: flex;
						align-items: center;
						margin-bottom: 20px;

						p {
							color: #999999;
						}
					}
				}

				.bottom-left-ul-last {
					li {
						display: flex;
						align-items: center;
						margin-bottom: 20px;

						p {
							color: #999;
						}
					}
				}

				.bottom-left-title {
					line-height: 1.5;
					height: 120px;
					overflow: auto;
				}

				.title {
					line-height: 65px;
					padding-left: 20px;
					border-bottom: 0;
				}

				.title::after {
					height: 0px;
				}

				.btn {
					display: flex;
					flex-wrap: wrap;
					padding-top: 20px;
					justify-content: center;

					div {
						width: 116px;
						height: 36px;
						line-height: 36px;
						text-align: center;
						background: #095844;
						color: #fff;
						border: 1px solid #15876a;
						margin-right: 46px;
						margin-bottom: 20px;
						cursor: pointer;
					}
				}
			}

			.left-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 48px 0;

				div {
					width: 120px;
					height: 45px;
					line-height: 45px;
					text-align: center;
					font-size: 14px;
					color: #FFFFFF;
					font-weight: 500;
					background: rgba(30, 176, 252, 0.35);
					border: 1px solid #1EB0FC;
					border-radius: 4px;
				}

				div:first-child {
					margin-right: 80px;
				}
			}

			.right {
				width: 594px;
				height: 500px;
				background: url(../../../../assets/new/detail_590.png) 0 0 no-repeat;
				background-size: 100% 100%;
				overflow: hidden;

				.right-title {
					width: 366px;
					height: 46px;
					background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
					background-size: 100% 100%;
					margin: 20px 0 0 15px;
					padding-left: 26px;
					display: flex;
					align-items: center;
				}
				.right-content::-webkit-scrollbar{
					width: 5px;
				}
				.right-content::-webkit-scrollbar-thumb{
					background-color: #CCCCCC;
				}
				.right-content{
					height: 410px;
					margin-right: 20px;
					overflow: auto;
				}
				.right-green{
					display: flex;
					align-items: center;
					padding: 0 47px;
					margin: 10px 0;
					.right-green-text{
						height: 72px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						p{
							font-size: 16px;
							color: #FFFFFF;
							font-weight: bold;
						}
						span{
							font-size: 14px;
							color: #999999;
						}
					}
					.right-green-count{
						font-size: 20px;
						color: #FFFFFF;
						font-weight: 500;
						padding-top: 25px;
						span{
							font-size: 28px;
						}
					}
				}
				
				.right-area{
					font-size: 14px;
					color: #999999;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 47px;
					.right-area-item{
						font-size: 14px;
						color: #FFFFFF;
						font-weight: 500;
						span:first-child{
							color: #999999;
						}
						span:last-child{
							font-size: 22px;
						}
					}
				}
				
				.right-person{
					display: flex;
					flex-wrap: wrap;
					margin: 0 47px;
					.right-person-item{
						width: 50%;
						font-size: 14px;
						color: #FFFFFF;
						font-weight: 500;
						display: flex;
						align-items: center;
						margin-top: 14px;
						img{
							width: 24px;
							height: 24px;
						}
						.right-person-item-text{
							color: #999999;
							margin: 0 10px;
						}
					}
					.right-person-item:nth-child(2n){
						justify-content: flex-end;
					}
				}
				
				.right-list{
					font-size: 18px;
					color: #FFFFFF;
					margin: 20px 47px 15px;
				}
				
				.right-num{
					font-size: 16px;
					color: #FFFFFF;
					font-weight: 500;
					margin: 0 47px;
					display: flex;
					align-items: center;
				}

				.right-day {
					height: 80px;
					border-bottom: 1px solid #23DBFC;
					display: flex;
					align-items: center;
					margin: 0 35px;

					img {
						width: 46px;
						height: 46px;
						margin-right: 10px;
					}

					p {
						font-size: 14px;
						color: #999999;
					}

					.flex {
						width: 30%;

						div {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
						}
					}
				}

				.right-ul-first {
					font-size: 16px;
					color: #FFFFFF;
					line-height: 1;
					display: flex;
					align-items: center;
					margin: 20px 35px;

					li {
						width: 50%;
						display: flex;
						align-items: center;

						p {
							color: #999999;
						}
					}
				}

				.work-icon {
					background-image: linear-gradient(-90deg, #25bb96, #7aa948);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.work-list {
					margin: 10px 47px 0;
					
					.work-list-not{
						font-size: 14px;
						color: #FFFFFF;
						text-align: center;
						img{
							width: 120px;
							height: 120px;
							display: block;
							margin: 0 auto;
						}
					}

					.work-list-item {
						margin-bottom: 20px;
						position: relative;

						.time {
							font-size: 16px;
							color: #fff;
							margin-bottom: 10px;
						}

						.name {
							font-size: 14px;
							color: #999999;
							margin-bottom: 10px;
						}

						.cont {
							font-size: 14px;
							color: #999999;
							line-height: 1.2;
						}

						.status {
							line-height: 34px;
							background: #666666;
							border-radius: 17px;
							font-size: 14px;
							color: #fff;
							text-align: center;
							padding: 0 15px;
							position: absolute;
							right: 0;
							top: 0;
						}

						.multimedia {
							display: flex;
							flex-wrap: wrap;

							.item {
								width: 25%;
								margin-top: 10px;

								img {
									width: 100%;
								}
							}

							.item:nth-child(3n) {
								margin-right: 0;
							}

							.video-item {
								position: relative;
								background: #797979;

								i {
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
								}
							}
						}
					}
				}
			}
		}
	}

	// 边框的点
	.border-spot {
		// border: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.border-spot::after {
		// content: "";
		// position: absolute;
		// left: 0;
		// bottom: 0;
		// width: 100%;
		// height: 1px;
		// box-sizing: border-box;
		// border-left: 3px solid #fff;
		// border-right: 3px solid #fff;
		// background: rgba(255, 255, 255, 0.1);
	}

	.border-spot::before {
		// content: "";
		// position: absolute;
		// left: 0;
		// top: 0;
		// width: 100%;
		// height: 1px;
		// box-sizing: border-box;
		// border-left: 3px solid #fff;
		// border-right: 3px solid #fff;
		// background: rgba(255, 255, 255, 0.1);
	}

	.border-bottom-spot {
		// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.border-bottom-spot::after {
		// content: "";
		// position: absolute;
		// left: 0;
		// bottom: 0;
		// width: 100%;
		// height: 1px;
		// box-sizing: border-box;
		// border-left: 3px solid #fff;
		// border-right: 3px solid #fff;
		// background: rgba(255, 255, 255, 0.1);
	}

	// 列表
	.list {
		font-size: 18px;

		p {
			color: #999999;
		}

		span {
			color: #ffffff;
		}
	}

	.skill {
		width: 1044px;
		height: 755px;
		background: url(../../../../assets/new/detail_pop_bgc.png) 0 0 no-repeat;
		background-size: 100% 100%;
		overflow-y: auto;
		
		.skill-nav{
			width: 306px;
			height: 46px;
			font-size: 16px;
			color: #23CEFD;
			font-weight: bold;
			background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			padding-left: 26px;
			margin: 22px 0 0 14px;
		}
	
		.skill-title {
			text-align: center;
			font-size: 26px;
			color: #FFFFFF;
			font-weight: bold;
			margin: 40px 0 20px;
		}
	
		.skill-tip {
			text-align: center;
			font-size: 20px;
			font-weight: 500;
			color: #CCCCCC;
		}
		.skill-img{
			width: 972px;
			height: 230px;
			display: block;
			margin: 20px auto;
		}
	
		.skill-cont {
			height: 260px;
			color: #fff;
			word-break: break-all;
			margin: 0 36px;
			overflow: auto;
		}
	}

	.issue {
		.issue-tabs {
			display: flex;
			padding: 0 14px;

			li {
				height: 39px;
				line-height: 39px;
				box-sizing: border-box;
				margin: 0 15px;
				color: #fff;
				cursor: pointer;
			}

			.current {
				color: #25bb96;
				border-bottom: 2px solid #25bb96;
			}
		}

		.issue-title {
			display: flex;
			background: #3a3c3e;
			padding: 13px 0;

			.issue-title-item {
				display: flex;
				align-items: center;
				margin-right: 6px;
				vertical-align: top;

				span {
					text-align: right;
					vertical-align: middle;
					// float: left;
					font-size: 14px;
					color: #515a6e;
					line-height: 1;
					padding: 10px 12px 10px 0;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					color: rgba(255, 255, 255, 0.65);
					padding-left: 20px;
				}
			}

			.issue-title-item:last-child {
				width: 15%;
				justify-content: flex-end;
				color: #ffffff;

				div {
					width: 60px;
					line-height: 32px;
					text-align: center;
					border-radius: 4px;
				}

				div:first-child {
					background: #25bb96;
					margin-right: 5px;
				}

				div:last-child {
					border: 1px solid rgba(230, 230, 230, 0.4);
				}
			}
		}

		.issue-page {
			height: 44px;
			line-height: 44px;
			text-align: center;
		}
	}
	.tree-title{
		font-size: 16px;
		color: #FFFFFF;
		line-height: 1;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding-left: 26px;
	}
	::v-deep{
		.ivu-modal-body {
		    padding: 0;
		}
		.ivu-modal-content {
		    box-shadow: 0 0 5px 0 rgba(37,187,150,0);
		    background: rgba(26, 26, 26, 0);
		}
		.ivu-modal-close {
		    right: 20px;
		    top: 20px;
		}
	}
</style>
